import React from 'react';
import ReactDOM from 'react-dom';

import Home from '../pages/home/home.jsx';
import Star from '../pages/star/star.jsx';
import Info from '../pages/info/info.jsx';
import List from '../pages/list/list.jsx';

import {
    TabBar,
} from 'amazeui-touch';

export default class Tab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: this.props.status
        }
    }
    handleClick(key, event){
		if(key === 'home'){
			ReactDOM.render(<Home />, document.getElementById('app'));
		}
		if(key === 'star'){
			ReactDOM.render(<Star />, document.getElementById('app'));
		}
		if(key === 'info'){
			ReactDOM.render(<Info />, document.getElementById('app'));
		}
		if(key === 'list'){
			ReactDOM.render(<List />, document.getElementById('app'));
		}
    }
    render() {
        return (
            <TabBar onAction={this.handleClick.bind(this)}>
                <TabBar.Item 
                selected 
                icon="home" 
                title="首页" 
                eventKey="home"
                selected={this.state.selected === 'home'}
                />
                <TabBar.Item 
                icon="star" 
                title="热推" 
                eventKey="star"
                selected={this.state.selected === 'star'}
                />
                <TabBar.Item 
                icon="info" 
                title="特色" 
                eventKey="info"
                selected={this.state.selected === 'info'}
                />
                <TabBar.Item 
                icon="list" 
                title="定向" 
                eventKey="list"
                selected={this.state.selected === 'list'}
                />
          </TabBar>
        );
    }
}
